<template>
	<view class="warp">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
		<uni-grid :column="3" :highlight="true" @change="change">
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">{{item.text}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>


<script>
	import {
		request
	} from '../../api/request';
	export default {
		data() {
			return {
				list: [{
						text: '业主登记'
					},
					{
						text: '访客登记'
					},
					{
						text: '我的登记'
					},
					{
						text: '待审核'
					},

					{
						text: '开门码'
					},
				],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {
			let openId = wx.getStorageSync('openId');
			if (openId) {} else {
				let that = this
				wx.login({
					success(res) {
						console.log(res);
						if (res.code) {
							//发起网络请求
							request({
								url: `/api/v1/common/authorize?js_code=${res.code}`,
								method: "GET",
							}).then(res => {
								console.log(res);
								if (res.code == 1) {
									let result = res.data;
									let openid = result.openid
									wx.setStorageSync('openId', openid)
								}
							})

						}
					}
				})
			}
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				switch (index) {
					case 0:
						uni.navigateTo({
							url: "/pages/people/index"
						});
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/guest/index"
						});
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/apply/index"
						});

						break;
					case 3:
						uni.navigateTo({
							url: "/pages/examine/index"
						});

						break;

					default:
						uni.navigateTo({
							url: "/pages/code/index"
						});
						break;
				}
			},
			change1(e) {
				this.current = e.detail.current
			},

			clickItem(e) {
				this.swiperDotIndex = e
			},

		},

	}
</script>

<style>
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}


	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
</style>